<template>
    <div class="good-item">
        <div style="">
            <div class="good-img">
                <a @click="openProduct(msg.productId)">
                    <img v-lazy="msg.productImageBig" :alt="msg.productName" :key="msg.productImageBig">
                </a>
            </div>
            <h6 class="good-title" v-html="msg.productName">{{msg.productName}}</h6>
            <h3 class="sub-title ellipsis">{{msg.subTitle}}</h3>
        </div>
    </div>
</template>
<script>
    import YButton from '../components/YButton'

    export default {
        props: {
            msg: {
                salePrice: 0
            }
        },
        data() {
            return {}
        },
        methods: {
            goodsDetails(id) {
                this.$router.push({path: 'goodsDetails/productId=' + id})
            },
            openProduct(id) {
                window.open(id)
            }
        },
        computed: {},
        mounted() {
        },
        components: {
            YButton
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import "../assets/style/mixin";
    @import "../assets/style/theme";

    .good-item {
        background: #fff;
        width: 25%;
        transition: all .5s;
        height: 430px;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 1px 1px 20px #999;

            .good-price p {
                display: none;
            }

            .ds {
                display: flex;
            }
        }

        .ds {
            @extend %block-center;
            width: 100%;
            display: none;
        }

        .good-img {
            img {
                margin: 50px auto 10px;
                @include wh(206px);
                display: block;
            }
        }

        .good-price {
            margin: 15px 0;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #d44d44;
            font-family: Arial;
            font-size: 18px;
            font-weight: 700;
        }

        .good-title {
            line-height: 1.2;
            font-size: 16px;
            color: #424242;
            margin: 0 auto;
            padding: 0 14px;
            text-align: center;
            overflow: hidden;
        }

        h3 {
            text-align: center;
            line-height: 1.2;
            font-size: 12px;
            color: #d0d0d0;
            padding: 10px;
        }

    }
</style>
